<template>
  <div class="home-join-wrapper">
    <div class="home-join">
      <div class="slides-wrapper">
        <el-carousel class="join-slides" height="310px">
          <el-carousel-item v-for="user in users" :key="user.id">
            <div class="join-img" :style="{ backgroundImage: 'url(' + user.src + ')' }">
              <div class="join-text">
                <div class="h1Text">{{ user.h1Text }}</div>
                <div class="h2Text">{{ user.h2Text }}<br />{{ user.h3Text }}</div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="join-content">
        <div class="content-wrapper">
          <h3>欢迎关注卷叔填填圈</h3>
          <img class="ttq-img" src="https://wj.qq.com/image/ttq-qrcode@2x.png" />
          <div class="ttq-search">公众号搜索“卷叔填填圈”</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        {
          id: 1,
          src: 'https://wj.qq.com/image/pc/act/join_3@2x.jpg',
          h1Text: '自由职业者',
          h2Text: '亲自参与',
          h3Text: '产品优化与迭代',
        },
        {
          id: 2,
          src: 'https://wj.qq.com/image/pc/act/join_2@2x.jpg',
          h1Text: '企业管理者',
          h2Text: '优先获得',
          h3Text: '腾讯问卷行业报告',
        },
        {
          id: 3,
          src: 'https://wj.qq.com/image/pc/act/join_1@2x.jpg',
          h1Text: '在校学生',
          h2Text: '轻松赚取',
          h3Text: '奖励红包和惊喜礼物',
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.home-join-wrapper {
  background-color: #fafafa;
  padding-bottom: 75px;
}
.home-join {
  width: 1038px;
  height: 310;
  box-sizing: border-box;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 10px;
  background-color: #fff;
  display: flex;
}
.slides-wrapper {
  width: 745px;
}
.join-img {
  height: 310px;
  display: flex;
  align-items: center;
  background-size: 100%;
}
.join-text {
  margin-left: 40px;
}
.h1Text{
  color: white;
  margin-bottom: 20px;
}
.h2Text{
  color: white;
  font-size: 30px;
}
.join-slides {
  border-radius: 3px;
}
.content-wrapper {
  width: 290px;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
h3 {
  width: 180px;
  border-radius: 4px;
  line-height: 34px;
  height: 34px;
  background-color: #f63a59;
  color: #fff;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 15px;
}
.ttq-img{
  width: 200px;
  height:180px;
}
.ttq-search {
  width: 180px;
  color: #f63a59;
  margin-top: 15px;
}
.join-content{
  width: 255px;
}
</style>
